<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://127.0.0.1:7000/qinyoudao/static/css/free_course.css">
    <script src="http://127.0.0.1:7000/qinyoudao/static/js/jquery-3.6.3.min.js"></script>
    
</head>
<body>
    <div id="head_line">
        <img src="http://127.0.0.1:7000/qinyoudao/static/images/logo.jpg" id="log"></img>
        <a href="http://127.0.0.1:7000/qinyoudao/templates/index.html">首页</a>
        <a href="http://127.0.0.1:7000/qinyoudao/templates/free_first.html">免费课</a>
        <a href="">直播课</a>
        <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_first.html">精品课</a>
        <a href="http://127.0.0.1:7000/qinyoudao/templates/course.html">我的课程</a>
        <a href="">在线客服</a>
        <a id="search">
            <input type="text" name="yzm" placeholder="搜索课程">
            <button type="btn">搜索</button>
        </a>
        <a href=""></a>
        <a href="">个人中心</a>
    </div>
    <div id="head_mid_title">
        <span id="mid_">精品课</span>
        <span id="mid__">实现从0到1的完美蜕变，专业技术傍身成就职场高手</span>
    </div>
    <ul>
        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p1">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v1.jpg" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p1">
                <span class="course_title" id="p1"></span>
            </a>
            <span class="free" id="p1p"></span>
            <span class="enroll" id="p1y"></span>
        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p2">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v2.jpg" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p2">
                <span class="course_title" id="p2"></span>
            </a>
            <span class="free" id="p2p"></span>
            <span class="enroll" id="p2y"></span>
        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p3">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v3.jpg" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p3">
                <span class="course_title" id="p3"></span>
            </a>
            <span class="free" id="p3p"></span>
            <span class="enroll" id="p3y"></span>
        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p4">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v4.jpg" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p4">
                <span class="course_title" id="p4"></span>
            </a>
            <span class="free" id="p4p"></span>
            <span class="enroll" id="p4y"></span>
        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p5">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v5.jpg" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p5">
                <span class="course_title" id="p5"></span>
            </a>
            <span class="free" id="p5p"></span>
            <span class="enroll" id="p5y"></span>
        </li>
    </ul>
    <ul>
        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p6">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v6.png" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p6">
                <span class="course_title" id="p6"></span>
            </a>
            <span class="free" id="p6p"></span>
            <span class="enroll" id="p6y"></span>
        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p7">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v7.png" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p7">
                <span class="course_title" id="p7"></span>
            </a>
            <span class="free" id="p7p"></span>
            <span class="enroll" id="p7y"></span>

        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p8">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v8.png" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p8">
                <span class="course_title" id="p8"></span>
            </a>
            <span class="free" id="p8p"></span>
            <span class="enroll" id="p8y"></span>

        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p9">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v9.png" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p9">
                <span class="course_title" id="p9"></span>
            </a>
            <span class="free" id="p9p"></span>
            <span class="enroll" id="p9y"></span>

        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p10">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v10.jpg" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p10">
                <span class="course_title" id="p10"></span>
            </a>
            <span class="free" id="p10p"></span>
            <span class="enroll" id="p10y"></span>

        </li>
    </ul>
    <ul>
        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p11">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v11.jpg" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p11">
                <span class="course_title" id="p11"></span>
            </a>
            <span class="free" id="p11p"></span>
            <span class="enroll" id="p11y"></span>

        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p12">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v12.jpg" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p12">
                <span class="course_title" id="p12"></span>
            </a>
            <span class="free" id="p12p"></span>
            <span class="enroll" id="p12y"></span>

        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p13">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v13.png" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p13">
                <span class="course_title" id="p13"></span>
            </a>
            <span class="free" id="p13p"></span>
            <span class="enroll" id="p13y"></span>

        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p14">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v14.jpg" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p14">
                <span class="course_title" id="p14"></span>
            </a>
            <span class="free" id="p14p"></span>
            <span class="enroll" id="p14y"></span>

        </li>

        <li class="li_free">
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p15">
                <img class="img" src="http://127.0.0.1:7000/qinyoudao/static/images/v15.jpg" alt="">
            </a>
            <a href="http://127.0.0.1:7000/qinyoudao/templates/pay_detail.html?p=p15">
                <span class="course_title" id="p15"></span>
            </a>
            <span class="free" id="p15p"></span>
            <span class="enroll" id="p15y"></span>

        </li>
    </ul>



<script>
//打开网页就开始加载数据
    //获取网页头部地址
    var querystring = location
    var querystring1 = "http://127.0.0.1:8000/course/pay_page"
    console.log(querystring1+"/data")
    window.onload=function(){
        $.ajax({
                url: querystring1+"/data",
                type: 'get',
                dataType: "json",
                success: function (res) {
                    
                    if (res.code == 200) {
                        res=res.data
                        var list_id=["p1", "p2", "p3", "p4", "p5", "p6",
               "p7", "p8", "p9", "p10", "p11", "p12",
               "p13", "p14", "p15"
               ]
               for(var i=0;i<=15;i++){
                   var p=list_id[i]
                   var id2=list_id[i]+"y"
                   var price=list_id[i]+"p"
                   $('#'+p).html(res[p])
                   $('#'+id2).html(res[id2])
                   $('#'+price).html(res[price])

               }
             }else{
                        alert(res.error)
                    }
                }
            })
    }
</script>
</body>
</html>